<template>
  <div>
    <base-right-dialog
      ref="baseRightDialog"
      :footerShow="true"
      :dialogVisible.sync="dialogVisible"
      :title="dialogTitle + ' 消息管理'"
      @handleClose="handleDialogClose"
      :type="dialogType"
      :submitShow="submitShow"
      :size="'65%'"
      @handleConfirmClick="handleConfirmClick"
    >
      <base-form
        ref="basicsForm"
        :formRow="formRow"
        :isFunBtn="false"
        :rules="basicsRules"
        class="dialog_form"
        :spanWidth="`120px`"
        :loading="vLoading"
        @onSelect="onSelect"
      ></base-form>
      <base-table
        :border="true"
        :showIndex="true"
        :tableColumn="tableVersionColumn"
        :tableData="tableReceiveData"
        :funWidth="80"
        :funData="funData"
        @onFunc="onFunc"
        :indexOperate="indexOperate"
        :bottomPlus="bottomPlus"
        @newRow="addVersionDialog"
      >
        <!-- 接收者名称 -->
        <template v-slot:receiveName="{ row }">
          <div style="width: 100%">
            <el-input
              v-model="row.receiveName"
              clearable
              type="text"
              :disabled="!submitShow"
            ></el-input>
          </div>
        </template>
        <!-- 接收者名称 -->
        <template v-slot:receiveCode="{ row }">
          <div style="width: 100%">
            <el-input
              v-model="row.receiveCode"
              clearable
              type="text"
              :disabled="!submitShow"
            ></el-input>
          </div>
        </template>
        <!--  接收者应用 -->
        <template v-slot:receiveApp="{ row }">
          <div style="width: 100%">
            <el-select
              v-model="row.receiveApp"
              :disabled="!submitShow"
              placeholder="请选择"
              @change="receiveChange($event, row)"
            >
              <el-option
                v-for="item in receiveAppOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </template>
        <!-- 接收者 -->
        <template v-slot:receiveApi="{ row }">
          <div style="width: 100%">
            <el-select
              v-model="row.receiveApi"
              :disabled="!submitShow"
              placeholder="请选择"
            >
              <el-option
                v-for="item in row.receiveApiOptions"
                :key="item.id"
                :label="item.apiName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </template>
        <!-- 数据类型 -->
        <template v-slot:dataType="{ row }">
          <div style="width: 100%">
            <el-radio-group v-model="row.dataType" :disabled="!submitShow">
              <el-radio :label="'1'">对象</el-radio>
              <el-radio :label="'2'">数组</el-radio>
            </el-radio-group>
          </div>
        </template>
        <!-- 返回类型 -->
        <template v-slot:returnType="{ row }">
          <el-select
            v-model="row.returnType"
            placeholder=""
            :disabled="!submitShow"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <!-- 备注 -->
        <template v-slot:remark="{ row }">
          <div style="width: 100%">
            <el-input
              v-model="row.remark"
              clearable
              type="text"
              :disabled="!submitShow"
            ></el-input>
          </div>
        </template>
      </base-table>
    </base-right-dialog>
  </div>
</template>

<script>
import baseRightDialog from "@/components/base/baseRightDialog";
import baseForm from "@/components/base/baseNewForm";
import baseTable from "@/components/base/baseTable";
import configData from "./configData";
import {authApi} from "@/api/apis/auth";

export default {
  components: {
    baseRightDialog,
    baseForm,
    baseTable,
  },
  data() {
    return {
      dialogVisible: false,
      dialogTitle: "",
      dialogType: "",
      formRow: configData.formRow,
      basicsRules: configData.basicsRules,
      vLoading: false,
      newMarryOptions: [],
      submitShow: true,
      tableReceiveData: [],
      tableVersionColumn: configData.tableVersionColumn,
      funData: [],
      receiveAppOptions: [], //接收者应用下拉框数据
      indexOperate: true,
      bottomPlus: true,
      options: [
        {
          value: "1",
          label: "BIP",
        }, {
          value: "2",
          label: "中台BIP",
        },
      ],
    };
  },
  mounted() {
  },
  methods: {
    openDialog(type, row) {
      this.querysysAppService();
      this.formRow = configData.formRow;
      this.submitShow = true;
      this.indexOperate = true;
      this.bottomPlus = true;
      this.funData = [
        {
          color: "#ff0000",
          text: "删除",
        },
      ];

      // 新增
      if (type == "add") {
        this.dialogTitle = "新增";
        this.dialogType = "add";
        this.$nextTick(() => {
          this.$refs.basicsForm.getField("dataType", "1");
        });
      }
      // 编辑
      if (type == "edit") {
        this.dialogTitle = "编辑";
        this.dialogType = "edit";
        this.messageGetById(row.id);
      }
      // 查看
      if (type == "show") {
        this.funData = Object.assign([], []);
        this.submitShow = false;
        this.indexOperate = false;
        this.bottomPlus = false;
        this.formRow = configData.formRowShow;
        this.dialogTitle = "查看";
        this.dialogType = "show";
        this.messageGetById(row.id);
      }
      this.dialogVisible = true;
    },
    // 编辑详情
    async messageGetById(id) {
      let params = {
        id: id,
      };
      let res = await authApi(
        "sysMessageManageService",
        "messageManage",
        "queryEntity",
        "",
        params
      );
      if (res.status == "200") {
        if (res.attribute.sendApp) {
          this.querysysAppApiService(res.attribute.sendApp);
        }
        res.attribute.detailList.forEach((item) => {
          item.receiveApiOptions = [];
          if (item.receiveApp) {
            this.querysysAppApiServiceSubtable(item.receiveApp, item);
          }
        });
        this.$nextTick(() => {
          this.$refs.basicsForm.incomingParameters(res.attribute);
          this.tableReceiveData = Object.assign([], res.attribute.detailList);
        });
      }
    },
    // 主表
    onSelect(val, index, indexRow, obj) {
      if (index == 2 && indexRow == 0 && val) {
        this.querysysAppApiService(val);
      }
    },
    addVersionDialog() {
      let obj = {dataType: "1", receiveApiOptions: []};
      this.tableReceiveData.push(obj);
    },
    // 删除
    onFunc(index, row) {
      if (index == 0) {
        this.$delConfirm().then(() => {
          this.tableReceiveData.splice(row.index, 1);
        });
      }
    },
    // 弹窗关闭
    handleDialogClose() {
      this.tableReceiveData = Object.assign([], []);
      this.$refs.basicsForm.resetFields();
      this.dialogVisible = false;
    },
    // 弹窗确认按钮
    handleConfirmClick() {
      this.$refs.basicsForm.$refs["ruleForm"].validate((valid) => {
        if (!valid) {
          return;
        } else {
          let isContinue = true;
          if (this.tableReceiveData.length > 0) {
            this.tableReceiveData.forEach((item, index) => {
              if (!item.receiveName) {
                this.$vmNews(
                  "第" + (index + 1) + "行，接收者名称 不能为空！",
                  "warning"
                );
                isContinue = false;
                return;
              }
              if (!item.receiveCode) {
                this.$vmNews(
                  "第" + (index + 1) + "行，接收者编码 不能为空! ",
                  "warning"
                );
                isContinue = false;
                return;
              }
              if (!item.receiveApp) {
                this.$vmNews(
                  "第" + (index + 1) + "行，接收者应用 不能为空! ",
                  "warning"
                );
                isContinue = false;
                return;
              }
              if (!item.receiveApi) {
                this.$vmNews(
                  "第" + (index + 1) + "行，接收者 不能为空! ",
                  "warning"
                );
                isContinue = false;
                return;
              }
              if (!item.dataType) {
                this.$vmNews(
                  "第" + (index + 1) + "行，数据类型 不能为空! ",
                  "warning"
                );
                isContinue = false;
                return;
              }
            });
          }
          if (!isContinue) {
            return;
          }
          let params = {
            ...this.$refs.basicsForm.ruleForm,
            detailList: [],
          };
          params.detailList = Object.assign([], this.tableReceiveData);
          if (this.dialogType == "add") {
            this.openLoading("submit");
            this.messageSaveDto(params);
          }
          if (this.dialogType == "edit") {
            this.openLoading("submit");
            this.messageUpdateDto(params);
          }
        }
      });
    },
    // 新增保存
    async messageSaveDto(params) {
      let res = await authApi(
        "sysMessageManageService",
        "messageManage",
        "saveEntity",
        "",
        params
      );
      if (res.status == "200") {
        this.handleDialogClose();
        this.$vmNews("新增成功", "success");
        this.$emit("resetTable");
      }
    },
    // 编辑保存
    async messageUpdateDto(params) {
      let res = await authApi(
        "sysMessageManageService",
        "messageManage",
        "updateEntity",
        "",
        params
      );
      if (res.status == "200") {
        this.handleDialogClose();
        this.$vmNews("更新成功", "success");
        this.$emit("resetTable");
      }
    },
    // 应用
    async querysysAppService() {
      let params = {
        pageSize: 9999,
        pageNum: 1,
      };
      let res = await authApi(
        "sysAppService",
        "app",
        "queryPageApp",
        "",
        params
      );
      if (res.status == "200") {
        this.formRow[2].elCol[0].options = res.attribute.list;
        this.receiveAppOptions = res.attribute.list;
      }
    },
    // 应用者
    async querysysAppApiService(appId) {
      let params = {
        pageSize: 9999,
        pageNum: 1,
        appId: appId,
      };
      let res = await authApi(
        "appApiService",
        "appApi",
        "queryPage",
        "",
        params
      );
      if (res.status == "200") {
        this.formRow[2].elCol[1].options = res.attribute.list;
      }
    },
    receiveChange(val, row) {
      if (val && row) {
        this.querysysAppApiServiceSubtable(val, row);
      }
    },
    async querysysAppApiServiceSubtable(appId, row) {
      let params = {
        pageSize: 9999,
        pageNum: 1,
        appId: appId,
      };
      let res = await authApi(
        "appApiService",
        "appApi",
        "queryPage",
        "",
        params
      );
      if (res.status == "200") {
        row.receiveApiOptions = res.attribute.list;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.dialogList {
  padding: 16px 0;
  border-top: 1px solid #dcdfe6;
  display: flex;
  flex-direction: column;
}

.updateBtn {
  border: 1px solid #ebedf1;
  padding: 5px 0;
  border-radius: 3px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  width: 100px;
}

.updateBtn:hover {
  color: #1890ff;
  border-color: #badeff;
  background-color: #e8f4ff;
}

::v-deep .el-table__body-wrapper.is-scrolling-none {
  height: auto !important;
}

::v-deep .app-container {
  height: auto !important;
}
</style>
